<template>
  <div class="loaction-area">
    <el-row type="flex" :gutter="16" style="font-size: 0px">
      <el-col :span="8">
        <el-select
          placeholder="选择省"
          v-model="provinceName"
          @change="addProvince"
          filterable
          :loading="loading1"
          size="small"
        >
          <el-option v-for="(row, index) in province" :value="row.id" :key="row.id" :label="row.name"></el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-select
          placeholder="选择市"
          v-model="cityName"
          @change="addCity"
          filterable
          :loading="loading2"
          size="small"
        >
          <el-option v-for="(row, index) in city" :value="row.id" :key="row.id" :label="row.name"></el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-select
          placeholder="选择区/县"
          v-model="districtName"
          @change="addDistrict"
          filterable
          :loading="loading3"
          size="small"
        >
          <el-option v-for="(row, index) in district" :value="row.id" :key="row.id" :label="row.name"></el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getLocation } from "@/api/data.js";

export default {
  props: {
    Location: {
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      address: "",
      lng: "",
      lat: "",
      provinceName: "",
      province: [],
      cityName: "",
      city: [],
      districtName: "",
      district: [],

      loading1: true,
      loading2: true,
      loading3: true,

      location: {},
      once: true
    };
  },
  methods: {
    readLocation(params, type) {
      getLocation(params).then(r => {
        switch (type) {
          case "province":
            this.province = r.data.list;
            this.loading1 = false;
            break;

          case "city":
            this.city = r.data.list;
            this.loading2 = false;
            break;

          case "district":
            this.district = r.data.list;
            this.loading3 = false;
            break;
        }
      });
    },
    addProvince(id) {
      let row = this.province.find(item => {
        return item.id == id;
      });
      this.location.province = row;
      if (id) {
        this.loading2 = true;
        this.readLocation({ pid: id }, "city");
        this.cityName = "";
        this.districtName = "";
      }
      this.$emit("getLoc", this.location);
    },
    addCity(id) {
      if (id) {
        this.loading3 = true;
        this.readLocation({ pid: id }, "district");
        this.districtName = "";
      }
      let row = this.city.find(item => {
        return item.id == id;
      });
      this.location.city = row;
      this.$emit("getLoc", this.location);
    },
    addDistrict(id) {
      let row = this.district.find(item => {
        return item.id == id;
      });
      this.location.district = row;
      this.$emit("getLoc", this.location);
    },
    setLoc() {
      
      if (this.Location.length == 0 || !this.Location[0]) return;

      getLocation({ id: this.Location[0] }).then(r => {
        if (r.data.list.length <= 0) return;
        this.loading1 = false;
        this.provinceName = r.data.list[0].id;
        this.location.province = r.data.list[0];
        if (!this.Location[1]) return;

        getLocation({ pid: r.data.list[0].id }).then(res => {
          if (res.data.list.length <= 0) return;
          let row = res.data.list.find(item => {
            return item.id == this.Location[1];
          });
          this.loading2 = false;
          this.city = res.data.list;
          if (row) {
            this.cityName = row.id;
            this.location.city = row;
          } else {
            return;
          }
          if (!this.Location[2]) return;

          getLocation({ pid: row.id }).then(re => {
            row = re.data.list.find(item => {
              return item.id == this.Location[2];
            });

            this.loading3 = false;
            this.district = re.data.list;
            if (row) {
              this.districtName = row.id;
              this.location.district = row;
            } else {
              return;
            }
          });
        });
      });
    }
  },
  mounted() {
    this.readLocation({ level: 1 }, "province");
    if(this.Location.length>0){
      if (this.once) {
        this.setLoc();
        this.once = false;
      }
    }
  },
  watch: {
    Location(val) {
      if (this.once) {
        this.setLoc();
        this.once = false;
      }
    }
  }
};
</script>